import React, {Component} from 'react'
import {Form, Select, Input,} from 'antd'
import PropTypes from 'prop-types'

const Item = Form.Item
const Option = Select.Option

class AddForm extends Component {

    static propTypes = {
        //用来传递form对象的函数
        setForm: PropTypes.func.isRequired,
        //一级分类的数组
        categorys: PropTypes.array.isRequired,
        //父分类的ID
        username: PropTypes.string.isRequired,
    }

    componentWillMount() {
        this.props.setForm(this.props.form)
    }

    render() {
        const {categorys, username} = this.props

        const {getFieldDecorator} = this.props.form

        return (
            <Form>
                <Item>
                    {
                        getFieldDecorator('username1', {
                            initialValue: username,
                            rules: [
                                {required: true,message:'用户名称必须输入'}
                            ]
                        })(
                            <Select>
                                <Option value='0'>一级分类</Option>
                                {
                                    categorys.map(c => <Option value={c.id}>{c.username}</Option>)
                                }
                            </Select>
                        )
                    }
                </Item>
                <Item>
                    {
                        getFieldDecorator('username', {
                            initialValue: '',
                            rules: [
                                {required: true,message:'分类名称必须输入'}
                            ]
                        })(
                            <Input placeholder='请输入分类名称'/>
                        )
                    }
                </Item>
                <Item>
                    {
                        getFieldDecorator('password', {
                            initialValue: '',
                            rules: [
                                {required: true,message:'密码必须输入'}
                            ]
                        })(
                            <Input placeholder='请输入帐号密码'/>
                        )
                    }
                </Item>
                <Item>
                    {
                        getFieldDecorator('perms', {
                            initialValue: '',
                            rules: [
                                {required: true,message:'标识必须输入'}
                            ]
                        })(
                            <Input placeholder='请输入标识'/>
                        )
                    }
                </Item>
            </Form>
        )
    }
}


export default Form.create()(AddForm)